<template>
  <!-- 超标统计 -->
  <view class="conter">
    <cc-timeA title='超标统计' text='选择时间' color='#fff' @confirm="confirm_a"></cc-timeA>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="head_b" :class="{head_a:falg==0}" @click="cheang">
        厂界
      </view>
      <view class="head_b" :class="{head_a:falg==1}" @click="cheang_a">
        排口
      </view>
    </view>
    <view class="card_a">
      <view class="chart">
        <view class="chart_word">
          超标图表
        </view>
        <view class="chart_btn">
          <view @click="change_a">
            <view :class=" btn_change == 0?'chart_btn_c':'chart_btn_a'">
              柱状图
            </view>
          </view>  
          <view @click="change_b">
            <view :class=" btn_change == 1?'chart_btn_c':'chart_btn_a'">
              饼状图
            </view>
          </view>
        </view>
      </view>
      <view class="region" v-if="btn_change==0">
        <scroll-view scroll-x="true" >
          <view  class="scroll"> 
            <echarts :option="option" style="height: 600rpx;width: 3000rpx;" @click="echartsClick"></echarts>
          </view>
        </scroll-view>
      </view> 
      <view class="region" v-if="btn_change==1">
            <echarts :option="option1" style="height: 600rpx;" @click="echartsClick"></echarts>
      </view>
    </view>
    <!-- 表格卡片 -->
    <view class="card_a">
      <view class="list_word">
        超标列表
      </view>
      <view class="list">
        <!-- 表格 -->
        <uni-table border stripe class="box">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th width="25%" align="center">名称</uni-th>
            <uni-th width="25%" align="center">超标次数</uni-th>
            <uni-th width="25%" align="center">超标比例</uni-th>
            <uni-th width="25%" align="center">超标浓度</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item,i) in over_standardList.list" :key='i'>
            <uni-td align="center">{{item.enterPriseName}}</uni-td>
            <uni-td align="center">{{item.overNum}}</uni-td>
            <uni-td align="center">{{item.overRate}}%</uni-td>
            <uni-td align="center" style="color: #FF7F6C;">{{item.tvoc}}{{item.unit}}</uni-td>
          </uni-tr>
         <!-- <uni-tr>
            <uni-td align="center">大勇</uni-td>
            <uni-td align="center">6</uni-td>
            <uni-td align="center" style="color: #B10A01;">120%</uni-td>
            <uni-td align="center" style="color: #B10A01;">23mg/m³</uni-td>
          </uni-tr> -->
        </uni-table>
      </view>
    </view>
  </view>
</template>

<script>
   import echarts from '@/components/echarts/echarts.vue';
  export default {
    data() {
      return {
        btn_change:0,
        falg: 0,
        startTime:'',
        endTime:'',
        choice:'',
        over_standardList:'',
        option: {
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            nameTextStyle :{
            					fontSize: 5
            				},
            name: '超标次数（次）',
            type: 'value'
          },
          series: [{
            data: [],
            type: 'bar'
          }]
        },
        option1:{
            tooltip: {
                trigger: 'item'
            },
        
            visualMap: {
                show: false,
                min: 0,
                max: 100,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series: [
                {
                    name: '超标次数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 274, name: '联盟广告'},
                        {value: 235, name: '视频广告'},
                        {value: 400, name: '搜索引擎'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        // color: 'rgba(255, 255, 255, 0.3)'
                    },
                    labelLine: {
                        lineStyle: {
                            // color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    },
                    itemStyle: {
                        color: '#c23531',
                        // shadowBlur: 200,
                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
        
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        },
      }
    },
    methods: {
      change_a(){
        this.btn_change=0
      },
      change_b(){
        this.btn_change=1
      },
      getOver_standard(){
        this.$http.get('/envirnment-air/app/analysis/standardOver/overEnterprises',{
          dateRange:this.startTime+','+this.endTime,
          dateType:this.choice,
          type:this.falg
        }).then(res=>{
           if(res.code=='00000'){
             this.over_standardList = res.data
             const list = []
             const list_a = []
             const list_b = []
             res.data.list.forEach((item,index)=>{
               list.push(item.enterPriseName)
               list_a.push(item.overNum)
               list_b.push({value:item.overNum,name:item.enterPriseName})
             })
             // console.log('list',list)
             // console.log('list_a',list_a) 
             // console.log('list_b',list_b)
             this.option.xAxis.data = list 
             this.option.series[0].data = list_a 
             this.option1.series[0].data = list_b
              this.$refs.update(this.option)
              this.$refs.update(this.option1)
           }
          console.log('getOver_standard',res.data.list)
        })
      },
      // 获取时间和dateType参数
      confirm_a(e) {
        this.startTime = e.startTime
        this.endTime = e.endTime
        this.choice = e.choice
        this.getOver_standard()
        // console.log('fjowefjie',e)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      cheang() {
        this.falg = 0
        this.getOver_standard()
      },
      cheang_a() {
        this.falg = 1
        this.getOver_standard()
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    // height: 1452rpx;
    background: #F7F7F7;
    overflow: hidden;
  }
   .uni-datetime-picker-timebox[data-v-6e13d7e2] {
     border: none !important;
   }
  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .head {
    width: 688rpx;
    height: 66rpx;
    display: flex;
    margin: 25rpx auto;
  }

  .head_a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: #4EA1FF !important;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF !important;
    border-radius: 8rpx;
  }

  .head_b {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    font-size: 24rpx;
   font-family: PingFang-SC-Medium, PingFang-SC;
   font-weight: 500;
   color: #666666;
    background-color: #fff;
    border-radius: 8rpx;
  }
 .card_a{
   width: 662rpx;
   padding: 20rpx;
   margin: 20rpx auto 0;
   border-radius: 8rpx;
   background-color: #FFFFFF;
 }
  .chart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: 633rpx;
  }
  .chart_word{
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #58657B;
    opacity: 1;
  }
  .chart_btn{
    display: flex;
    width: 160rpx;
    height: 32rpx;
    font-size: 14rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 1;
  }
  .chart_btn_a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 32rpx;
    color:  #4EA1FF;
    border: 1rpx solid #4EA1FF;
    opacity: 1;
    border-radius: 4rpx;
    overflow: hidden;
  }
  .chart_btn_c{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 36rpx;
    color: #FFFFFF;
    background: #4EA1FF;
    opacity: 1;
    border-radius: 4rpx;
  }
  .list_word {
    margin-bottom: 16rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .region{
    width: 100%;
    scroll-view{
      width: 100%;
    }
  }
  .scroll{
    width: 100%;
    transform: translate(-35%,-1%);
  }
</style>
